/*
 * @Author: wangming
 * @Date: 2021-09-14 09:49:16
 * @LastEditors: wangming
 * @LastEditTime: 2021-09-16 16:11:59
 * @FilePath: /hanma-application-designer-fed/src/components/dynamicForm/mainContent/__layouts/hlMindmap/config.js
 * @Description:
 */
import G6 from "@antv/g6";
export class MindGraph {
    changeLayout(newLayout) {
        let layout = this.treegraph.get("layout");
        this.treegraph.changeLayout(Object.assign({}, layout, newLayout));
        this.treegraph.fitView(30);
    }
    constructor({ width, height, direction, mapType }) {
        G6.registerNode(
            "my-node",
            {
                draw(cfg, group) {
                    const rect = group.addShape("rect", {
                        name: "rect-shape",
                    });
                    const text = group.addShape("text", {
                        attrs: {
                            text: cfg.label,
                            fill: "#666",
                            cursor: "pointer",
                        },
                        name: "text-shape",
                    });
                    const bbox = text.getBBox();
                    let { x, y, width, height } = bbox;
                    rect.attr({
                        fill: "#f2f6fc",
                        stroke: "#1A91FF",
                        width: width + 10,
                        height: height * 2,
                        radius: 4,
                        cursor: "pointer",
                    });
                    text.attr({
                        x: 5,
                        y: 18,
                    });
                    return rect;
                },
            },
            "rect"
        );
        this.treegraph = new G6.TreeGraph({
            container: "mountNode", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
            defaultNode: {
                type: "my-node",
            },
            defaultEdge: {
                type: "cubic-horizontal",
            },
            // 定义布局
            layout: {
                type: mapType, // 布局类型
                direction, // 自左至右布局，可选的有 H
                getHeight: () => {
                    return 0;
                },
                getWidth: () => {
                    return 10;
                },
                getVGap: () => {
                    return 20;
                },
                getHGap: () => {
                    return 50;
                },
                getSide: (d) => {
                    if (d.id % 2) {
                        return "left";
                    } else {
                        return "right";
                    }
                },
            },
            width, // Number，必须，图的宽度
            height, // Number，必须，图的高度
        })
        this.treegraph.read(mindJson); // 读取 Step 2 中的数据源到图上
        this.treegraph.fitView();
    }
}
const mindJson = {
    id: "root",
    label: "根节点",
    children: [
        {
            id: "1",
            label: "一级 1",
            children: [
                {
                    id: "4",
                    label: "二级 1-1",
                    children: [
                        {
                            id: "9",
                            label: "三级 1-1-1",
                        },
                        {
                            id: "10",
                            label: "三级 1-1-2",
                        },
                    ],
                },
            ],
        },
        {
            id: "2",
            label: "一级 2",
            children: [
                {
                    id: "5",
                    label: "二级 2-1",
                },
                {
                    id: "6",
                    label: "二级 2-2",
                    children: [
                        {
                            id: "3",
                            label: "三级 3",
                            children: [
                                {
                                    id: "7",
                                    label: "四级 3-1",
                                },
                                {
                                    id: "8",
                                    label: "四级 3-2",
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            id: "11",
            label: "一级 1",
            children: [
                {
                    id: "41",
                    label: "二级 1-1",
                    children: [
                        {
                            id: "91",
                            label: "三级 1-1-1",
                        },
                        {
                            id: "101",
                            label: "三级 1-1-2",
                        },
                    ],
                },
            ],
        },
        {
            id: "22",
            label: "一级 1",
            children: [
                {
                    id: "411",
                    label: "二级 1-1",
                    children: [
                        {
                            id: "911",
                            label: "三级 1-1-1",
                        },
                        {
                            id: "1011",
                            label: "三级 1-1-2",
                        },
                    ],
                },
            ],
        },
    ],
};